<template>
  <div class="supply-content" v-loading="showSpin">
    <el-card class="search-card">
      <div slot="header" class="clearfix">
        <span>商品供货信息</span>
        <div class="card-operating-area">
          <el-button type="text" @click="handleSaveSupplyInfo">保存</el-button>
        </div>
      </div>
      <el-card class="search-card" shadow="never">
        <div class="base-info">
          <el-row class="detail">
            <span
              ><b>状态：</b>{{ supplyDataInfo.supplyPriceAddStateStr }}</span
            >
            <span><b>管理区域：</b>{{ supplyDataInfo.manageAreaName }}</span>
            <span><b>商品名称：</b>{{ supplyDataInfo.productName }}</span>
          </el-row>
          <el-row type="flex" align="middle">
            <span><b>销售区域：</b>{{ supplyDataInfo.saleAreaNames }}</span>
            <el-button type="text" size="large" @click="handleSelectArea">选择区域</el-button>
          </el-row>
        </div>
      </el-card>
      <div class="supply-info-wrap">
        <el-card class="search-card" shadow="never">
          <div class="suppler-info">
            <supply-dialog
              @getName="handleSelectSupplier"
              :supplyEditName="supplyDataInfo.supplyName || ''"
            />
            <span>运费承担方：{{ supplyDataInfo.freightPayer }}</span>
          </div>
        </el-card>
        <el-card class="search-card" shadow="never">
          <div class="table-title">供货SKU信息：</div>
          <skus-table
            :showTotal="false"
            :table-height="350"
            :columns="supplySkuColumns"
            :data-source="supplyDataInfo.skuInfoVos"
          />
        </el-card>
        <el-card class="search-card" shadow="never">
          <div class="table-title">供货信息维护如下：</div>
          <skus-table
            :showTotal="false"
            :table-height="350"
            :columns="supplyInfoColumns"
            :data-source="supplyDataInfo.supplySkuRelInfoVos"
          />
        </el-card>
        <el-card class="supply-mode-card" shadow="never">
          <div class="suppler-info">
            <div class="mt5">
              供货价格方式：
              <el-radio-group v-model="supplyDataInfo.purchasePriceType" @change="handleChangePriceType">
                <el-radio :label="'1'">统一进价</el-radio>
                <el-radio :label="'2'">区域进价</el-radio>
              </el-radio-group>
            </div>
            <el-button type="text" @click="handleShowRefCityDialog"
              >设置参照城市关系</el-button
            >
          </div>
        </el-card>
        <el-card class="search-card" shadow="never">
          <el-row type="flex" justify="space-between" align="middle">
            <div class="table-title">供货价格相关信息如下:</div>
            <BtnRender :render="renderBtnsBar" />
          </el-row>
          <skus-table
            :table-height="400"
            :columns="supplyPriceColumns"
            :data-source="isAraePurchasePrice ? areaPriceList : unifiedPriceList"
            @handleRowSpecialChange="handleRowSpecialChange"
          />
        </el-card>
      </div>
    </el-card>
    <el-backtop target="#app .i-layout-content-main">
      <i class="el-icon-top"></i>
    </el-backtop>
    <!-- 设置参照城市弹框 -->
    <set-reference-city
      :visible.sync="referenceCityVisible"
      :supplierCode="supplyDataInfo.supplyUuid || ''"
      :showReferenceCityColumns="showReferenceCityColumns"
      :templateTableData="supplyDataInfo.supplyAreaInfoVos"
      :getReferenceCityListAction="getReferenceCityListAction"
      @getSetCityData="handleGetSetData"
    />
    <SalesAreaDialog
      :visible.sync="salesArea.visible"
      :cityList="salesArea.list"
      :selectCitys="salesArea.selectCitiesCodes"
      @getSaleAreas="updateSaleAreaInfo"
    />
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
import SupplyDialog from '@/components/commodity/getSupply';
import SkusTable from '@/components/skusTable';
import SetReferenceCity from '@/components/common/dialog/setReferenceCity';
import SalesAreaDialog from '@/components/SalesAreaDialog';
import {
  SUPPLY_INFO_COLUMNS,
  SUPPLY_SKU_COLUMNS,
  SUPPLY_PRICE_SINGLE_COLUMNS,
  SUPPLY_PRICE_MANY_COLUMNS
} from '../../constants/skuToBePerfect/skuSupplyInfo';
import { showReferenceCityColumns } from '@/pages/commodity/modules/constants/referenceCityModule/modifyReferCityMultiple';
import { ApiRequest } from '@api/basePage';
import {
  isResponseSuccess, uniqObjInArray,
  generateUuid, createExcelByExport
} from '@/utils/bizUtils';
import { handlePriceChangeForSingleAdd, handleSpecialPriceChangeForMultipleAdd, hasEmptyPriceForMultiple, hasEmptyPriceForSingle } from '@/utils/price';
import BtnRender from '@/components/JSXRender/BtnRender';
import { getBtnsBar } from '@/utils/getBtnsRender';
import { requestToExport } from '@/api/commonHttp';
import { getListByReturnMapKey } from '@/utils/getUtils';
import { queryBusinessAreaListService } from '@/api/public'; // 获取售卖平台及销售区域
export default {
  components: {
    SupplyDialog,
    SkusTable,
    SetReferenceCity,
    BtnRender,
    SalesAreaDialog
  },
  data () {
    return {
      showSpin: false,
      referenceCityVisible: false,
      productUuid: '',
      defaultTemplateCityUuid: '', // 默认参照城市
      showReferenceCityColumns: showReferenceCityColumns, // 展示参照城市弹框columns
      supplyInfoColumns: SUPPLY_INFO_COLUMNS, // 供货信息
      supplySkuColumns: SUPPLY_SKU_COLUMNS, // 供货SKU
      supplyPriceSingleColumns: SUPPLY_PRICE_SINGLE_COLUMNS, // 进价信息单计量
      supplyPriceManyColumns: SUPPLY_PRICE_MANY_COLUMNS, // 进价信息多计量
      supplyDataInfo: {
        purchasePriceType: '1', // 供货价格方式  1统一进价 2区域进价
        supplyPriceAddStateStr: '', // 状态
        supplyPriceAddState: '', // 状态
        manageAreaName: '', // 管理区域
        productName: '', // 商品名称
        saleAreaNames: '', // 销售区域
        saleAreaNos: '', // 销售区域
        supplyName: '', // 供应商名称
        supplyUuid: '', // 供应商Uuid
        freightPayer: '', // 运费承担方
        skuInfoVos: [], // 供货参照城市
        supplyAreaInfoVos: [], // 供货sku信息
        supplySkuRelInfoVos: [], // 供货信息
        supplyAreaPriceInfoVos: [] // 供货价格
      },
      tmpCityColumn: [
        {
          title: '参照城市',
          key: 'templateCityName'
        },
        {
          title: '业务区域',
          key: 'templateCitySaleAreaName'
        }
      ],
      unifiedPriceList: [], // 统一进价表格数据
      areaPriceList: [], // 区域进价表格数据
      // 发票类型，税率信息
      taxRateInvoiceInfo: {
        taxRate: '',
        invoiceType: '',
        invoiceTypeName: ''
      },
      btnLoading: {
        export: false, // 导出按钮loading
      },
      salesArea: {
        visible: false,
        list: [],
        selectCitiesCodes: [],
      }
    };
  },
  computed: {
    // 是否为待完善状态
    isInitState () {
      return this.supplyDataInfo.supplyPriceAddState == 'INIT';
    },
    // 是否为多计量
    isMultUnit () {
      return this.isPurchaseMultiUnit == 1;
    },
    // 是否为区域进价
    isAraePurchasePrice () {
      return this.supplyDataInfo.purchasePriceType == 2;
    },
    // 动态渲染进价表格表头
    supplyPriceColumns () {
      if (this.isMultUnit) {
        if (this.isAraePurchasePrice) {
          return this.tmpCityColumn.concat(SUPPLY_PRICE_MANY_COLUMNS);
        }
        return SUPPLY_PRICE_MANY_COLUMNS;
      } else {
        if (this.isAraePurchasePrice) {
          return this.tmpCityColumn.concat(SUPPLY_PRICE_SINGLE_COLUMNS);
        }
        return SUPPLY_PRICE_SINGLE_COLUMNS;
      }
    }
  },
  created () {
    const { productUuid, isPurchaseMultiUnit } = this.$route.query;
    this.productUuid = productUuid;
    this.isPurchaseMultiUnit = isPurchaseMultiUnit;
    // this.querySupplyInfoAction(productUuid);
    this.loadInitDetailsData(productUuid)
  },
  methods: {
    ...mapMutations('commonComps/setReferenceCity', [
      'SET_TABLE_DATA',
      'SET_REFERENCE_CITIES',
      'SET_PURCHASE_PRICETYPE',
      'DESTORY_STATE'
    ]),
    // 加载初始化数据
    async loadInitDetailsData (productUuid) {
      await this.setSaleAreaList()
      this.querySupplyInfoAction(productUuid);
    },
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const importUrl = {
        '1': 'sysback/supplyareaprice/importTemplateForCreateSteel',
        '2': 'sysback/supplyareaprice/importTemplateForCreate',
      }
      const btns = [
        {
          label: '模板导入',
          action: importUrl[this.isPurchaseMultiUnit] || '',
          methods: {
            handleUploadSuccess: this.handleUploadSuccess,
            handleBeforeUpload: this.handleBeforeUpload
          },
          isImport: true,
          loadingFn: state => { this.showSpin = state },
          data: {
            manySupply: '2',
            supplyUuid: this.supplyDataInfo.supplyUuid,
            purchasePriceType: this.supplyDataInfo.purchasePriceType
          },
          hasNoSize: true
        },
        {
          label: '模板导出',
          method: this.handleExport,
          loading: this.btnLoading.export,
        }
      ]
      return getBtnsBar(h, btns);
    },
    // 导入前
    handleBeforeUpload () {
      if (!this.supplyDataInfo.supplyUuid) {
        this.$message.warning('请先选择供应商');
        return false;
      }
      if (this.supplyDataInfo.supplyAreaInfoVos.length == 0) {
        this.$message.warning('请先设置参照城市关系');
        return false;
      }
      this.showSpin = true;
    },
    // 导入成功
    handleUploadSuccess (res) {
      this.showSpin = false;
      const { retData, retStatus, retMessage } = res;
      if (retStatus !== '1') {
        return this.$message.error(retMessage || '导入失败');
      }
      this.$message.success('导入成功');
      const supplyAreaPriceInfoVos = retData.map(item => {
        let row = {
          ...item,
          templateCitySaleAreaNo: item.saleAreaUuid,
          templateCitySaleAreaName: item.saleAreaName,
          taxRate: this.taxRateInvoiceInfo.taxRate,
          invoiceType: this.taxRateInvoiceInfo.invoiceType,
          invoiceTypeName: this.taxRateInvoiceInfo.invoiceTypeName
        }
        this.handleRowSpecialChange({ row });
        return row;
      });
      this.initTableData(supplyAreaPriceInfoVos);
    },
    // 导出
    handleExport () {
      if (!this.supplyDataInfo.supplyUuid) {
        this.$message.warning('请先选择供应商');
        return false;
      }
      if (this.supplyDataInfo.supplyAreaInfoVos.length == 0) {
        this.$message.warning('请先设置参照城市关系');
        return false;
      }
      this.exportPurchaseData();
    },
    async exportPurchaseData () {
      const uuid = generateUuid();
      const purchaseTableList = this.isAraePurchasePrice ? this.areaPriceList : this.unifiedPriceList;
      const productType = this.isMultUnit ? '2' : '1'; // 多计量为2，单计量为1
      const res = await requestToExport({
        url: '/sysback/supplyareaprice/downLoadTemplateForCreate',
        type: 'post',
        data: {
          uuid,
          manySupply: '2',
          skuNos: getListByReturnMapKey(purchaseTableList, 'skuNo'),
          supplyAreaParams: this.supplyDataInfo.supplyAreaInfoVos,
          productType,
          supplyUuid: this.supplyDataInfo.supplyUuid,
          supplyName: this.supplyDataInfo.supplyName,
          supplyPriceType: this.supplyDataInfo.purchasePriceType,
          supplyAreaPriceParams: purchaseTableList.map(item => ({ ...item, supplyUuid: this.supplyDataInfo.supplyUuid }))
        }
      },
      () => { this.btnLoading.export = true; },
      () => { this.btnLoading.export = false; }
      );
      createExcelByExport({ res, excelTitle: `供货价格模板_${uuid}` });
    },
    // 保存供货信息
    savePriceDataAction (params) {
      this.showSpin = true;
      ApiRequest(
        `/sysback/product/addSku/supplyInfo/createSupplyInfo`,
        'post',
        params
      )
        .then((res) => {
          this.showSpin = false;
          if (isResponseSuccess(res)) {
            this.$message.success('保存成功')
            this.$router.go(-1)
          }
        })
        .catch(() => {
          this.showSpin = false;
        })
    },
    // SPU已关联sku查询
    querySupplyInfoAction (productUuid) {
      this.showSpin = true;
      ApiRequest(
        `/sysback/product/addSku/supplyInfo/getProductSupplyInfoByProductUuid?productUuid=${productUuid}`,
        'post',
        {}
      )
        .then((res) => {
          this.showSpin = false;
          if (isResponseSuccess(res)) {
            const {
              purchasePriceType,
              supplyPriceAddStateStr,
              supplyPriceAddState,
              manageAreaName,
              productName,
              saleAreaNames,
              saleAreaNos,
              supplyName,
              supplyUuid,
              freightPayer,
              skuInfoVos,
              supplySkuRelInfoVos,
              supplyAreaInfoVos,
              supplyAreaPriceInfoVos,
              defaultTemplateCityUuid,
              taxRate,
              invoiceType,
              invoiceTypeName
            } = res.retData;
            this.supplyDataInfo = {
              purchasePriceType: purchasePriceType || '1',
              supplyPriceAddStateStr,
              supplyPriceAddState,
              manageAreaName,
              productName,
              saleAreaNames,
              saleAreaNos,
              supplyName,
              supplyUuid,
              freightPayer,
              skuInfoVos,
              supplySkuRelInfoVos,
              supplyAreaInfoVos,
              supplyAreaPriceInfoVos
            };
            this.taxRateInvoiceInfo = {
              taxRate,
              invoiceType,
              invoiceTypeName
            }
            supplyAreaPriceInfoVos.forEach(item => {
              item.taxRate = taxRate
              item.invoiceType = invoiceType
              item.invoiceTypeName = invoiceTypeName
              // this.handleRowSpecialChange({ row: item })
            })
            this.defaultTemplateCityUuid = defaultTemplateCityUuid || '';
            this.initTableData(supplyAreaPriceInfoVos);
            this.loadSaleAreaInfo(res.retData)
          }
        })
        .catch(() => {
          this.showSpin = false;
        });
    },
    // 初始化进价表格数据
    initTableData (data) {
      if (this.isInitState) {
        // 如果区域进价类型
        if (this.isAraePurchasePrice) {
          this.areaPriceList = _.cloneDeep(data);
        }
        this.unifiedPriceList = _.cloneDeep(data);
      } else {
        if (this.isAraePurchasePrice) {
          this.unifiedPriceList = uniqObjInArray(data, 'skuNo');
          this.areaPriceList = _.cloneDeep(data);
        } else {
          this.unifiedPriceList = _.cloneDeep(data);
        }
      }
    },
    // 选择供应商回调
    handleSelectSupplier (row) {
      const {
        freightPayer,
        supplierCode,
        supplierName,
        taxRate,
        invoiceType,
        invoiceTypeName
      } = row;
      this.supplyDataInfo.freightPayer = freightPayer;
      this.supplyDataInfo.supplyUuid = supplierCode || '';
      this.supplyDataInfo.supplyName = supplierName || '';
      this.taxRateInvoiceInfo = {
        taxRate,
        invoiceType,
        invoiceTypeName
      }
      if (this.areaPriceList.length != 0) {
        this.areaPriceList.forEach(item => {
          item.taxRate = taxRate
          item.invoiceType = invoiceType
          item.invoiceTypeName = invoiceTypeName
        })
      }
      this.unifiedPriceList.forEach(item => {
        item.taxRate = taxRate
        item.invoiceType = invoiceType
        item.invoiceTypeName = invoiceTypeName
        this.handleRowSpecialChange({ row: item })
      })
      // 切换供应商清空参照信息
      this.handleEmptyPriceData();
    },
    // 获取当前销售区域的参照城市列表
    getReferenceCityListAction () {
      const { saleAreaNos, purchasePriceType } = this.supplyDataInfo;
      return new Promise((resolve, reject) => {
        ApiRequest(
          '/sysback/supplyinfofromsrcm/getSupplyCityByAreaCodes',
          'post',
          { areaCode: saleAreaNos },
          true
        )
          .then((res) => {
            if (!isResponseSuccess(res)) {
              return false;
            }
            let initRetData = res.retData.reduce((value, item) => {
              value.push({
                ...item,
                isSupply: '',
                buyPriceRatio: 1,
                costPriceRatio: 1,
                templateCityName: '',
                templateCityUuid: '',
                saleCityNo: item.cityCode,
                saleCityName: item.cityName,
                saleProvinceNo: item.provinceCode,
                saleProvinceName: item.provinceName,
                templateCitySaleAreaNo: item.areaCode,
                templateCitySaleAreaName: item.areaName
              });
              return value;
            }, []);
            let setCityData = []; // 设置参照城市表格数据
            let supplyReferenceCityList = [];
            initRetData.forEach((item) => {
              setCityData.push({
                ...item,
                supplyUuid: this.supplyDataInfo.supplyUuid,
                _disabled: false
              });
              supplyReferenceCityList.push({
                _disabled: false,
                value: item.saleCityNo,
                label: item.saleCityName
              });
            });
            this.SET_TABLE_DATA(setCityData);
            this.SET_REFERENCE_CITIES(supplyReferenceCityList);
            this.SET_PURCHASE_PRICETYPE(purchasePriceType);
            resolve(true);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    // 获取设置完参照城市后的表格数据
    handleGetSetData (data) {
      const { tableData, defaultCity = {} } = data;
      const { templateCityUuid = '' } = defaultCity;
      // 默认参照城市
      this.defaultTemplateCityUuid = templateCityUuid;
      // 格式化参照城市列表
      const templateCityData = tableData.reduce((value, item) => {
        value.push({
          saleAreaUuid: item.saleAreaUuid,
          saleAreaName: item.saleAreaName,
          saleProvinceUuid: item.saleProvinceNo,
          saleProvinceName: item.saleProvinceName,
          saleCityUuid: item.saleCityNo,
          saleCityName: item.saleCityName,
          templateCityUuid: item.templateCityUuid,
          templateCityName: item.templateCityName,
          buyPriceRatio: item.buyPriceRatio,
          costPriceRatio: item.costPriceRatio,
          isSupply: item.isSupply,
          templateCitySaleAreaNo: item.saleAreaUuid,
          templateCitySaleAreaName: item.saleAreaName
        });
        return value;
      }, []);
      // 参照城市最终集合
      this.supplyDataInfo.supplyAreaInfoVos = templateCityData;
      // 过滤销售城市与参照城市相同的项
      let uniqTemplateCityData = templateCityData.filter((item) => item.saleCityUuid === item.templateCityUuid);
      // 供货价格方式为区域经进价组合区域进价表格数据
      if (this.isAraePurchasePrice) {
        this.areaPriceList = this.reorganizePurchaseTableDataFn(uniqTemplateCityData);
        this.areaPriceList.forEach(item => {
          this.handleRowSpecialChange({ row: item })
        })
      }
    },
    // 根据参照城市信息组合区域进价表格数据
    reorganizePurchaseTableDataFn (uniqTemplateCityData) {
      const { supplyAreaPriceInfoVos } = this.supplyDataInfo;
      return uniqObjInArray(supplyAreaPriceInfoVos, 'skuNo').reduce(
        (value, item) => {
          uniqTemplateCityData.forEach((val) => {
            value.push({ ...item, ...val, ...this.taxRateInvoiceInfo });
          });
          return value;
        }, []);
    },
    // 显示参照城市弹框
    handleShowRefCityDialog () {
      if (!this.supplyDataInfo.saleAreaNos) {
        return this.$message.warning('销售区域不能为空');
      }
      if (!this.supplyDataInfo.supplyUuid) {
        return this.$message.warning('请先选择供应商');
      }
      this.referenceCityVisible = true;
    },
    // 价格变动联动
    handleRowSpecialChange (data) {
      const { row } = data;
      // 单计量
      if (!this.isMultUnit) {
        handlePriceChangeForSingleAdd(row)
      }
      // 多计量
      if (this.isMultUnit) {
        handleSpecialPriceChangeForMultipleAdd(data, this.supplyDataInfo.purchasePriceType, this.areaPriceList)
      }
    },
    // 进价类型切换
    handleChangePriceType () {
      this.handleEmptyPriceData();
    },
    // 进价类型切换
    switchPurchaseTypeInitTableData (dataSource) {
      const { supplyAreaPriceInfoVos } = this.supplyDataInfo;
      // 进价类型为区域进价时
      if (this.isAraePurchasePrice) {
        this.unifiedPriceList = [];
        this.areaPriceList = _.cloneDeep(supplyAreaPriceInfoVos);
      } else {
        this.unifiedPriceList = uniqObjInArray(supplyAreaPriceInfoVos, 'skuNo')
        this.areaPriceList = [];
      }
    },
    // 清空参照城市及进价列表
    handleEmptyPriceData () {
      // 清空参照城市信息
      this.supplyDataInfo.supplyAreaInfoVos = [];
      // 清空默认参照城市
      this.defaultTemplateCityUuid = '';
      // 清空区域进价
      this.areaPriceList = [];
      this.DESTORY_STATE();
    },
    // 保存供货信息
    handleSaveSupplyInfo () {
      const { supplyUuid, purchasePriceType, supplySkuRelInfoVos, supplyAreaInfoVos } = this.supplyDataInfo;
      if (!supplyUuid) {
        return this.$Message.warning('请选择供应商');
      }
      if (supplyAreaInfoVos.length == 0) {
        return this.$Message.warning('请设置参照城市关系');
      }
      if (!this.isAraePurchasePrice && !this.defaultTemplateCityUuid) {
        return this.$Message.warning('请设置默认参照城市');
      }
      let priceData = [];
      let hasEmptyPrice = false;
      let tipMsg = '';
      if (this.isAraePurchasePrice) {
        priceData = this.areaPriceList;
      } else {
        priceData = this.unifiedPriceList;
      }
      if (this.isMultUnit) {
        const { hasEmptyVal, msg } = hasEmptyPriceForMultiple(priceData)
        hasEmptyPrice = hasEmptyVal;
        tipMsg = msg;
      } else {
        const { hasEmptyVal, msg } = hasEmptyPriceForSingle(priceData)
        hasEmptyPrice = hasEmptyVal;
        tipMsg = msg;
      }
      if (hasEmptyPrice) {
        return this.$message.warning(tipMsg);
      }
      const params = {
        supplyUuid,
        productUuid: this.productUuid,
        purchasePriceType,
        defaultTemplateCityUuid: this.defaultTemplateCityUuid || '',
        supplySkuRelInfoParams: supplySkuRelInfoVos,
        supplyAreaInfoParams: supplyAreaInfoVos,
        supplyAreaPriceInfoParams: priceData,
        saleAreaNos: this.supplyDataInfo?.saleAreaNos ? this.supplyDataInfo.saleAreaNos.split(',') : []
      }
      this.savePriceDataAction(params)
    },
    // 选择销售区域
    handleSelectArea () {
      this.salesArea.visible = true
    },
    // 设置销售区域集合
    async setSaleAreaList () {
      const loadingFn = state => { this.pageLoading = state }
      const res = await queryBusinessAreaListService({}, loadingFn)
      this.salesArea.list = res?.retData ?? []
    },
    // 加载销售区域信息
    loadSaleAreaInfo (data) {
      if (data?.saleAreaNos) return
      const relSaleCities = this.salesArea.list.filter(item => item.manageAreaUuid == data?.manageAreaId)
      this.updateSaleAreaInfo(relSaleCities.map(item => item.areaCode))
    },
    // 更新销售区域信息
    updateSaleAreaInfo (areaCodes) {
      this.supplyDataInfo.saleAreaNames = this.salesArea.list
        .filter(item => areaCodes.includes(item.areaCode))
        .map(item => item.shortName)
        .join('')
      this.supplyDataInfo.saleAreaNos = this.salesArea.list
        .filter(item => areaCodes.includes(item.areaCode))
        .map(item => item.areaCode)
        .join(',')
      this.salesArea.selectCitiesCodes = areaCodes
    },
  }
};
</script>
<style lang="less" scoped>
.supply-content {
  .supply-mode-card {
    /deep/.el-card__body {
      padding: 5px 20px;
    }
  }
  .table-title {
    margin-bottom: 5px;
  }
  .card-operating-area {
    float: right;
  }
  .base-info {
    // margin-bottom: 20px;
    .detail {
      margin: 10px 0;
      span {
        float: left;
        margin-right: 40px;
      }
    }
  }
  .supply-info-wrap {
    .suppler-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .mt5 {
    margin-bottom: 5px;
  }
}
</style>
